<template>
  <el-container class="h-screen">
    <!-- 顶部导航栏 -->
    <el-header v-if="hasLogin" class="bg-gray-100 shadow-sm">
      <el-menu
        :default-active="route.path"
        mode="horizontal"
        router
        active-text-color="#409EFF"
        class="emun"
      >
  
        <el-menu-item index="/home">
          <template #title>
            <el-icon><House /></el-icon>
            <span>首页</span>
          </template>
        </el-menu-item>

        <el-menu-item index="/warehouse">
          <el-icon><Box /></el-icon>
          <span>仓库页</span>
        </el-menu-item>

        <el-sub-menu index="card-group">
          <template #title>
            <el-icon><Collection /></el-icon>
            <span>卡牌管理</span>
          </template>
          <el-menu-item index="/card">卡牌总览</el-menu-item>
          <el-menu-item index="/cardmate">卡牌种类</el-menu-item>
        </el-sub-menu>

        <el-sub-menu v-if="isRoot" index="admin-group">
          <template #title>
            <el-icon><User /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/users">账户管理</el-menu-item>
          <el-menu-item index="/log">日志查看</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/admin">
            <el-icon><User /></el-icon>
            <span>管理员面板</span>
        </el-menu-item>

      </el-menu>
    </el-header>

    <!-- 主内容区 -->
    <el-main class="p-6">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </el-main>
  </el-container>
</template>

<script setup>
import { watch, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getInfo } from './api/Login'
import {
  House,
  Box,
  Collection,
  User,
} from '@element-plus/icons-vue'

const route = useRoute()

const hasLogin = computed(() => route.meta.requiresAuth)
const isRoot = ref(false)

const checkPermission = () => {
  getInfo().then(res => {
    if(res.data.code === 200){
      console.log("权限检查结果：", res.data.data.permission)
      isRoot.value = res.data.data.permission > 1
    }
  })
}

watch(hasLogin, checkPermission, { immediate: true })
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.emun {
  display:flex;
  width: 100%;
}

.el-header {
  padding: 0 20px;
  height: 60px;
  
}

.el-menu--horizontal {
  
  border-bottom: none;
}
</style>
